<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" :ellipsis="false"
    @select="handleSelect">
    <!-- 左侧的菜单 -->
    <el-menu-item index="0">
      <el-icon color="409eff" size="28">
        <Shop />
      </el-icon>
      图书商城
    </el-menu-item>

    <!-- 右侧的菜单 -->
    <!-- 搜索框 -->
    <el-menu-item index="1">
      <!-- 搜索框 -->
      <el-input placeholder="搜索" v-model="searchValue" clearable @clear="handleClear" @keyup.enter="handleSearch"
        class="search-input">
        <template #suffix>
          <el-icon @click="handleSearch" color="#409eff" class="search-icon cursor-pointer">
            <Search />
          </el-icon>
        </template>
      </el-input>

    </el-menu-item>
    <el-menu-item index="9" v-if="isAdminValue">管理员</el-menu-item>
    <el-menu-item index="2">
      <el-icon>
        <ShoppingCart />
      </el-icon>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon>
        <List />
      </el-icon>
    </el-menu-item>
    <!--  头像 -->
    <el-menu-item index="4">
      <el-avatar size="small" :src="squareUrl ? squareUrl : nullImageUrl" @error="handleImageError" />
    </el-menu-item>


    <el-sub-menu index="5">
      <template #title>
        <el-icon>
          <Setting />
        </el-icon>
      </template>

      <el-menu-item index="5-1">个人信息</el-menu-item>
      <el-menu-item index="5-2">注册新账户</el-menu-item>
      <el-menu-item index="5-3">登录账户</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { ShoppingCart, List, UserFilled, Setting } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { storeToRefs } from 'pinia'
const userStore = useUserStore()
const { isAdmin } = storeToRefs(userStore)
const isAdminValue = ref(isAdmin.value)
console.log("是否是管理员:", isAdminValue.value);

//头像
const squareUrl = ref('')
squareUrl.value = userStore.userInfo.avatar


// Vite 中处理静态资源路径：用 new URL 拼接
const defaultImageUrl = new URL('../../assets/error2.png', import.meta.url).href;
const nullImageUrl = new URL('../../assets/noPicture.jpg', import.meta.url).href;

// 图片加载失败事件处理
const handleImageError = (event) => {
  // event.target 就是触发 error 的 img 元素，直接设置 src
  event.target.src = defaultImageUrl;
  console.log('图片加载失败，已替换为默认图');
};
// 搜索栏
const searchValue = ref('')
// const searchType = ref('all')
// 清空搜索栏
const handleClear = () => {
  searchValue.value = ''
}
const router = useRouter()//获取路由实例
const activeIndex = ref('1')

// 搜索逻辑
// 处理搜索
const handleSearch = () => {
  const keyword = searchValue.value.trim()
  if (keyword) {
    // 传递搜索词和搜索类型到搜索结果页面
    router.push({
      path: '/bookSearch',
      query: {
        searchText: keyword,
      }
    })
  }
}
// 处理导航栏选项函数
const handleSelect = (key: string, keyPath: string[]) => {
  console.log('选中菜单项:', key, keyPath)

  switch (key) {
    case '0': // 图书商城（首页）
      console.log('选中菜单项:', key, keyPath)
      router.push('/')
      break
    case '1': // 搜索框所在项（保留原逻辑，但建议改为搜索页）
      // router.push('/bookSearch')

      break
    case '2': // 购物车
      router.push('/shoppingCart')
      break
    case '3': // 订单
      router.push('/myOrderLists')
      break
    case '4': // 用户中心
      router.push('/userCenter')
      break
    case '5-1': // 个人信息
      router.push('/userCenter')
      break
    case '5-2': // 注册新账户
      router.push('/register')
      break
    case '5-3': // 登录账户
      router.push('/login')
      break
    case '9': // 管理员
      router.push('/admin')
      break
    default:
      console.log('未处理的菜单项:', key)
  }
}
</script>

<style scoped>
.search-input {
  width: 600px;
  /* margin-right: 200px */
}

.search-icon {
  color: #409eff;
  /* 主色调图标 */
  font-size: 20px;
}

.el-menu-demo {
  width: 100%;
  background-color: rgba(185, 185, 185, 0.1);
}



.el-menu--horizontal>.el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>
